<template>
  <div>
    <el-container>
    <el-header>习水安卓屏视频管理</el-header>
    <el-container>
      <el-aside :style="{height: pageHeight + 'px'}" style='width: 200px; border-top: 1px solid #efefef'>
        <el-menu
        :default-active='editableTabsValue'
        class='el-menu-vertical-demo'
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="selectMenu"
        style="height: 100%">
          <el-menu-item v-for="(item, index) in menus" :key="index" :index='item.name'>
            <i :class="'iconfont ' + item.icon"></i>
            <span slot='title'>{{item.title}}</span>
          </el-menu-item>
      </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <el-tabs v-model='editableTabsValue' closable type='card'  @tab-click='changeTab' @tab-remove='removeTab'>
            <el-tab-pane
              :key='item.name'
              v-for='(item) in editableTabs'
              :label='item.title'
              :name='item.name'
            >
            </el-tab-pane>
          </el-tabs>
          <router-view></router-view>
        </el-main>
        <el-footer>@copyright 2017 中测信息</el-footer>
      </el-container>
    </el-container>
  </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editableTabsValue: 'device',
      pageHeight: 0,
      menus: [
        {
          title: '设备管理',
          name: 'device',
          icon: 'icon-ic_devices'
        },
        {
          title: '视频管理',
          name: 'video',
          icon: 'icon-video'
        }
      ],
      editableTabs: [
        {
          title: '设备管理',
          name: 'device',
          icon: 'icon-ic_devices'
        }
      ]
    }
  },
  mounted() {
    // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
    this.pageHeight = window.innerHeight - 59
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
    const that = this
    window.onresize = function temp() {
        that.pageHeight = document.documentElement.clientHeight - 60
    }
    // 初始化时判断路由,打开对应的tab
    if(this.$route.name === 'Device'){
      this.selectMenu('device')
    } else if(this.$route.name === 'Video'){
      this.selectMenu('video')
    } else {
      this.$router.push('/main/device')
    }
  },
  components: {
  },
  methods: {
    changeTab(tab) {
       this.$router.push('/main/' + tab.name)
    },
    removeTab(name) {
      for(var i = 0; i < this.editableTabs.length; i++){
        if(this.editableTabs[i].name === name){
          let nextTab = this.editableTabs[i + 1] || this.editableTabs[i - 1];
          this.editableTabs.splice(i,1)
          if(nextTab){
            this.editableTabsValue = nextTab.name
          }else{
            this.editableTabsValue = ''
          }
        }
      }
    },
    selectMenu(index) {
      let have = false
      this.editableTabs.forEach(item => {
        if(index == item.name) {
          have = true
        }
      })
      if(!have){
        this.menus.forEach(item => {
          if(index == item.name) {
            this.editableTabs.push(item)
          }
        })
      }
      this.editableTabsValue = index
    }
  },
  watch: {
    editableTabsValue: function(newValue) {
      if(newValue !== '0') {
       this.$router.push('/main/' + newValue)
      }
    },
    // 监听路由变化切换tab
    $route: function (to) {
      if(to.name === 'Device'){
        this.selectMenu('device')
      } else if(to.name === 'Video'){
        this.selectMenu('video')
      } else {
        this.$router.push('/main/device')
      }
    }
  }
}
</script>

<style scoped lang='stylus'>
.el-header
    background-color #545c64
    color #fff
    text-align center
    height 60px
    line-height 60px
.el-footer
    color #999
    text-align center
    height 60px
    line-height 59px
.el-aside
  color #333
  text-align center
  height 800px
  i
    margin-right 6px
.el-main
  color #333
  text-align center
</style>
